<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>蜜读会员</title>
	<link rel="stylesheet" type="text/css" href="css/style.css?v=22323" />
	<link rel="stylesheet" type="text/css" href="css/aui.css?v=22323" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css?v=22323" />
	<script src="js/art-template.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/wxrem.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="//s.url.cn/qqun/qun/qqweb/m/qun/confession/js/vconsole.min.js"></script>-->
	<style>
		body,html{
			height:auto;
			padding-bottom: 3rem;
		}
		p,
		h2 {
			margin: 0;
		}

		body:before {
			border: 0;
			display: block;
			content: '';
		}

		.top {
			text-align: center;
			overflow: hidden;
			position: relative;
			border: 0;
		}
		.top #inviteRecord {
			position: absolute;
			right: 10px;
			top: 10px;
			border-radius: 15px;
			border: 1px solid #333;
			font-size: 12px;
			padding: 5px 10px;
		}

		.top h2 {
			font-size: 25px;
			font-weight: bold;
		}

		.center ul li {
			border-radius: 5px;
			padding:5px 10px;
			line-height: 40px;
			margin-bottom: 10px;
			background: #eee;
			height: 50px;
			border:1px solid #eee;
		}

		.center .open-type .active {
			background: #fff7e5;
			border:1px solid #d9c3a4;
		}

		.bottom {
			position: fixed;
			width: 100%;
			bottom: 0;
			left: 0;
			border-top: 1px solid #eee;
			text-align: center;
			z-index: 10;
			background: #Fff;
		}

		.hide {
			display: none;
		}

		.follow-code-container .follow-mask,.share-get-container .follow-mask{
			position: fixed;
			top:0;
			left:0;
			bottom:0;
			right: 0;
			background:rgba(0,0,0,.3);
			z-index: 100;
		}
		.follow-code-container .follow-dialog,.share-get-container .follow-dialog{
			position: fixed;
			top:50%;
			left:50%;
			margin-left:-125px;
			margin-top:-120px;
			width:250px;
			border-radius: 6px;
			background: #FFf;
			z-index: 101;
			text-align: center;
			padding:25px 0;
		}
		.follow-code-container .follow-dialog{
			height:280px;
			margin-top:-140px;
		}
		.share-get-container .follow-dialog{
			margin-top:0;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}
	</style>
</head>

<body>
<div class="follow-code-container" style="display: none;">
	<div class="follow-mask"></div>
	<div class="follow-dialog" >
		<img src="img/wechatCode.png" alt="" style="border-radius:50%;width: 50px;height:50px;display: inline-block;margin:5px 0 10px 0;border: 2px solid #eee ;"/>
		<div class="follow-title" style="font-size: 16px;font-weight: bold;margin-bottom: 10px;">
			恭喜你加入蜜读VIP
		</div>
		<div class="time-text">
			<span style="color:#666666"></span>
			<p style="font-size:12px;color:#ED8434;margin: 10px auto 0;text-align: left;width: 80%;">会员期内，每邀请一位好友加入，你的会员期限可延长7天（奖励不设上限）</p>
		</div>
		<div class="follow-allow-btn" style="background: #ED8434;border-radius: 3px;line-height:40px;width:80%;text-align: center;margin:20px auto 0;color:#FFFFFF;font-size: 15px;font-weight: 600;">
			我知道了
		</div>
	</div>
</div>
<div class="share-get-container" style="display: none;" >
	<div class="follow-mask"></div>
	<div class="follow-dialog" >
		<img src="img/get-success.png" style="width:40px;margin:0 auto 5px"/>
		<div class="follow-title" style="font-size: 16px;font-weight: bold;margin-bottom: 8px;">
			恭喜你加入蜜读VIP
		</div>
		<div class="time-text" style="margin: 0.5rem;padding:0.5rem;line-height: 2rem;margin-left: 10px; font-size: 12px;">
			会员期内，每邀请一位好友加入，你的会员期限可延长7天（奖励不设上限）
		</div>
		<img src="img/wechatCode.png" alt="" style="width: 120px;height:120px;display: inline-block;margin:5px 0 7px 0;"/>
		<p style="font-size:12px;color:#666">长按识别二维码</p>
	</div>
</div>
<div class="top">
	<!--<div id="inviteRecord">-->
	<!--邀请记录-->
	<!--</div>-->
	<img src="img/midu_vip_img0.png" style="width: 100%;" alt="" />
</div>
<div class="center">
	<ul class="open-type not-free-open-type" style="margin: 30px 20px;border-radius: 5px;">
	</ul>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img1.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img2.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img3.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img4.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img5.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img6.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img7.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img8.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img9.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img10.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img11.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img12.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img13.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img14.png" / style="width: 100%;">
	</div>
	<div class="member-img" style="width: 100%;">
		<img src="img/midu_vip_img15.png" / style="width: 100%;">
	</div>
</div>

<div class="bottom">
	<div class="year-vip-btnContainer">
		<div class="col-xs-6 " style="line-height: 50px;">
			<p style="font-size: 16px;color: #fe9a35;" class="year-fee-container">&yen; <span class="year-now-fee" style="font-weight: bold;"></span> <s style="line-height: 50px;font-size:12px;color: #999;">原价&yen;<span class="year-origin-fee"></span></s></p>
			<!--<p style="font-size: 12px;color:#999;">限时优惠：<span id="year-fee-time"></span></p>-->

		</div>
		<div class="col-xs-6" id="rechargeVip" style="font-weight: bold;background: #fbd454;color:#333;height:51px;line-height: 50px;font-size: 17px; font-weight: bold;">
			立即开通
		</div>
	</div>
</div>
<div id="warn" style="background: rgba(0, 0, 0, 0.7);text-align: center;border-radius: 0.25rem;color: #ffffff;position: fixed;z-index: 1000;top: 45%;left: 50%;width: 8em;margin-left: -4em;height: 3rem;line-height: 3rem;display: none;">请先登录！</div>
<div id="inviteMask" style="position: fixed;width:100%;top:0;left:0;bottom:0;z-index: 1000;display: none;">
	<img src="img/inviteAlert.png" alt="" style="width:100%;height:100%;"/>
</div>
<!--回到首页-->
<img class="backToHome hide" src="img/backToHome.png" style="width: 6.3rem; height: 4.9rem; bottom: 8.2rem; right: 0; position: fixed; z-index: 1000;"/>
</body>
<script type="text/html" id="vipListData">
	{{each data}}
	{{if $value.product_id!=10000}}
	{{if $value.recommend==1}}
	<li class="open-type-item active" proId="{{$value.product_id}}"  original_price="{{$value.original_price}}" price="{{$value.price}}">
		{{else}}
	<li class="open-type-item" proId="{{$value.product_id}}"  original_price="{{$value.original_price}}" price="{{$value.price}}">
		{{/if}}
		{{$value.product_name}}
		{{if $value.recommend==1}}
		<img src="img/ic.png" style="display: inline-block;vertical-align: middle;margin:-5px 0 0 -5px;width: 30px;" alt="" />
		{{/if}}
		<div style="float: right;text-align: right;padding:6px 0;">
			{{if $value.original_price==0}}
			<p style="line-height: 30px;font-size: 15px;"><span style="color:#fe9a35;">&yen;{{$value.price}}</span></p>
			{{else}}
			<p style="line-height: 14px;font-size: 16px;font-weight:600;"><span style="color:#fe9a35;">&yen;{{$value.price}}</span></p>
			<p style="line-height: 14px;font-size:11px;color:#999999;"><s>原价¥{{$value.original_price}}</s></p>
			{{/if}}
		</div>
	</li>
	{{/if}}
	{{/each}}
</script>

</html>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    document.writeln("<script type=\"text/javascript\" src=\"js/common.js?"+ Math.random() + "\"></scr"+"ipt>");
</script>
<script src="js/purl.js"></script>
<script src="js/md5.js " type="text/javascript " charset="utf-8"></script>
<script src="js/aui-toast.js" type="text/javascript" charset="utf-8"></script>
<script src="js/aui-dialog.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    var toast = new auiToast();
    var openId2 = GetQueryString('openId2');
    var shareBack=GetQueryString('shareBack')
    var originUserVip='';
    var showInviteMask=GetQueryString('showInviteMask')
    var merchant_id = GetQueryString('merchant_id');
    var timer1='';
    $('.backToHome').click(function(){
        location.href = "index.html?merchantId="+merchantId
    })
    if(GetQueryString('home')){
        $('.backToHome').removeClass('hide')
    }

    $(function() {
        if(showInviteMask==1){
            //禁止滑动
            document.body.style.overflow = 'hidden';
            window.addEventListener('touchmove',_preventDefault);
            $('#inviteMask').show()
        }
        $('#inviteMask').click(function(){
            //恢复滑动效果
            document.body.style.overflow = 'auto';
            window.removeEventListener('touchmove', _preventDefault);
            $(this).hide()
        })
        function _preventDefault(e){
            e.preventDefault();
        }
        $("#inviteRecord").click(function() {
            window.location.href = "inviteRecord.html";
        });
        var after1=function(){
            originUserVip = userVip;
            var userName=JSON.parse(sessionStorage.getItem('weixinData')).data.nickname

            shareWx(userName+'邀请你加入蜜读VIP，与1%的精英阅读者一起学习', 'vipShareLog.png', '每天半小时，听懂一本书');
            if(userVip.type==-1||userVip.type==1){
                $('#rechargeVip').text('立即续费')
            }
        }
        getToken(after1);

        $('.open-type').on('click', 'li', function() {
            $('.open-type-item').removeClass('active')
            $(this).addClass('active')

            var item=$(this);
            $('.year-now-fee').html(item.attr('price'))
            $('.year-origin-fee').html(item.attr('original_price'))
            if(item.attr('original_price') == 0){
                $('.year-fee-container s').addClass('hide')
            }else{
                $('.year-fee-container s').removeClass('hide')
            }
            var activity_time = item.attr('activity_time');
            activity_time = activity_time.replace("-","/");
            activity_time = activity_time.replace("-","/");
            if(!item.attr('activity_time')||new Date(activity_time).getTime()<new Date().getTime()){
                $('#year-fee-time').parent().addClass('hide')
                $('.year-fee-container').css('line-height','40px').css('font-size','18px')
            }else{
                $('#year-fee-time').parent().removeClass('hide')

                $('.year-fee-container').css('line-height','20px').css('font-size','18px')
                clearInterval(timer1)
                timer1=setInterval(function() {
                    ShowCountDown( activity_time,'year-fee-time');
                }, 1000);
            }
        })

        //获取vip列表
        var getVipList = function() {
            $.ajax({
                type: "get",
                url: hostUrl + 'product/vip/list',
                success: function(data) {
                    data.data.forEach(function(item){
                        if(item.recommend==1){
                            $('.year-now-fee').html(item.price)
                            $('.year-origin-fee').html(item.original_price)

                            if (item.original_price == 0) {
                                $('.year-fee-container s').addClass('hide')
                            } else{
                                $('.year-fee-container s').removeClass('hide')
                            }


                        }
                    })
                    var listHtml = template('vipListData', data);
                    $('.not-free-open-type').html(listHtml)
                }
            });
        }
        getVipList()

        var getMyVip = function() {
            $.ajax({
                type: "get",
                url: hostUrl + 'product/vip/get?=' + openId,
                success: function(data) {

                    toast.hide();
                    if(!data.data){
                        return;
                    }
                    userVip=data.data;
                    var weixinData=JSON.parse(sessionStorage.getItem('weixinData'));
                    weixinData.data.vip=userVip;
                    sessionStorage.setItem('weixinData',JSON.stringify(weixinData))
                    window.sessionStorage.setItem('userVip',JSON.stringify(userVip))
                    $('.follow-code-container img').attr('src',weixinData.data.headImgUrl)

                }
            });
        }


        $('.follow-allow-btn').on('click',function(){
            $('.follow-code-container').hide()
            if(shareBack==1){
                history.go(-1)
            }else{
                location.href="index.html"
            }
        })

        $('#rechargeVip').on('click', function() {
            payClick(JSON.parse(window.sessionStorage.getItem("weixinData")), 7, $('.open-type-item.active').attr('proId'), false, merchant_id, userId,getMyVip);
        })

        function ShowCountDown(enddate, divname) {
            var end = new Date(enddate);
            var now = new Date();
            var leftTime = end.getTime() - now.getTime();
            leftTime = (leftTime / 1000);
            var dd = parseInt(leftTime / (60 * 60 * 24)); //计算剩余的天数
            var hh = parseInt((leftTime / (60 * 60)) % 24); //计算剩余的小时数
            var mm = parseInt((leftTime / 60) % 60); //计算剩余的分钟数
            var ss = parseInt(leftTime % 60); //计算剩余的秒数

            var dayStr = "";
            var hourStr = "";
            var minStr = "";
            var secStr = "00秒";

            if (dd > 0) {
                dayStr = dd + "天";
            }

            if (hh > 0) {
                hourStr = hh + "小时";
            }

            if (mm > 0) {
                minStr = mm + "分";
            }

            if (ss > 0) {
                if (ss < 10) {
                    secStr = "0" + ss + "秒";
                } else{
                    secStr = ss + "秒";
                }
            }

            var cc = document.getElementById(divname);
            cc.innerHTML = dayStr + hourStr + minStr + secStr;
        }
    })
</script>